<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--查询-->
      <!--查询-->
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="租户名" prop="distrName">
          <el-input v-model="queryParams.distrName" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <!-- 关闭创建卖家入口（有些信息补全，全部走推荐创建去），代码标记弃用 -->
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['distribution:user:insertSellerUser']"
        >
          创建卖家
        </el-button>
      </el-col> -->

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>
    <el-table
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      @selection-change="(rows) => (tableCheck = rows)"
    >
      <el-table-column show-overflow-tooltip type="selection" width="50" align="center" />
      <!-- 租户id 租户名称 商家手续费 积分 推荐人 推荐人上级 总公司 卖家级别 利润倍率
      手续费 云池申请限制 操作 -->
      <!-- 租户id -->
      <el-table-column show-overflow-tooltip label="租户id" align="center" prop="distrId" />
      <!-- 租户名称 -->
      <el-table-column show-overflow-tooltip label="租户名称" align="center" prop="distrName" />

      <!-- 积分 -->
      <!-- <el-table-column show-overflow-tooltip label="积分" align="center" prop="points" /> -->
      <!-- 推荐人 -->
      <!-- <el-table-column
        show-overflow-tooltip
        label="推荐人"
        align="center"
        width="200"
        prop="referrerName"
      /> -->
      <!-- 推荐人分成比例 -->
      <el-table-column
        show-overflow-tooltip
        width="200"
        label="推荐人分成比例"
        align="center"
        prop="referrerProportion"
      >
        <template slot-scope="{ row }">
          <div>{{ row.referrerName }}</div>
          <div style="color: green">{{ (+row.referrerProportion).toFixed(2) }}%</div>
        </template>
      </el-table-column>
      <!-- 推荐人上级 -->
      <!-- <el-table-column
        show-overflow-tooltip
        label="推荐人上级"
        width="200"
        align="center"
        prop="referrerSuperName"
      /> -->
      <!-- 推荐人上级分成比例 -->
      <el-table-column
        width="200"
        show-overflow-tooltip
        label="推荐人上级分成比例"
        align="center"
        prop="referrerProportion"
      >
        <template slot-scope="{ row }">
          <div>{{ row.referrerSuperName }}</div>
          <div style="color: green">{{ (+row.referrerSuperProportion).toFixed(2) }}%</div>
        </template>
      </el-table-column>
      <!-- 总公司上级分成比例 -->
      <el-table-column
        show-overflow-tooltip
        label="总公司上级分成比例"
        width="200"
        align="center"
        prop="headOfficeName"
      >
        <template slot-scope="{ row }">
          <div>{{ row.headOfficeName }}</div>
          <div style="color: green">{{ (+row.headOfficeProportion).toFixed(2) }}%</div>
        </template>
      </el-table-column>
      <!-- 卖家级别 -->
      <el-table-column show-overflow-tooltip label="卖家级别" align="center" prop="level">
        <template slot-scope="{ row }">
          <span>{{ row.level }}级</span>
        </template>
      </el-table-column>
      <!-- 利润倍率 -->
      <el-table-column show-overflow-tooltip label="利润倍率" align="center" prop="profitRate" />
      <el-table-column show-overflow-tooltip label="自动积分抵扣" align="center" prop="profitRate">
        <template #default="{ row }">
          <!-- 自动积分抵扣  0：否 1：是 -->
          <div v-if="row.pointAutoPay == 0" style="color: red">{{ $t('否') }}</div>
          <div v-if="row.pointAutoPay == 1" style="color: green">{{ $t('是') }}</div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="过期时间" align="center" prop="profitRate">
        <template slot-scope="{ row }">
          {{ row.expireTime == '长期有效' ? '长期有效' : row.expireTime.split(' ')[0] }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip fixed="right" :label="$t('操作')" align="center" width="160">
        <template slot-scope="scope">
          <!-- 修改信息 修改密码 禁用/启用 修改租户 -->
          <el-dropdown @command="(command) => handleCommand(command, scope.row)">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right"> 更多 </el-button>
            <el-dropdown-menu slot="dropdown">
              <!-- v-hasPermi="['system:user:resetPwd']" -->
              <!--
                查询卖家信息
                查看卖家用户
                编辑利润倍率
                查询卖家快递信息
                编辑卖家快递信息
                编辑卖家信息
                推荐列表
                强势回收库存
             -->
              <el-dropdown-item command="roleManage" v-hasPermi="['distribution:roleDistr:list']">
                卖家角色管理
              </el-dropdown-item>
              <el-dropdown-item command="handleDetail" v-hasPermi="['distribution:user:selectSellerInfo']">
                查询卖家信息
              </el-dropdown-item>
              <el-dropdown-item command="handleEdit" v-hasPermi="['distribution:user:updateSellerUser']">
                编辑卖家信息
              </el-dropdown-item>
              <el-dropdown-item command="sellerUsers" v-hasPermi="['distribution:user:getSellerUserListByDistrId']">
                查看卖家用户
              </el-dropdown-item>
              <el-dropdown-item command="editProfitRatio" v-hasPermi="['distribution:user:updateProfitRate']">
                编辑利润倍率
              </el-dropdown-item>
              <el-dropdown-item command="expressInfo" v-hasPermi="['distribution:express:list']">
                查询卖家快递信息
              </el-dropdown-item>
              <el-dropdown-item command="editExpressInfo" v-hasPermi="['distribution:express:edit']">
                编辑卖家快递信息
              </el-dropdown-item>

              <el-dropdown-item v-hasPermi="['distribution:user:getReferrerList']" command="recommendList">
                推荐列表
              </el-dropdown-item>

              <el-dropdown-item v-hasPermi="['distribution:skuSeller:forceRecoveryList']" command="forceRecoveryList">
                强制回收库存
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['distribution:orderClient:query']" command="sellerCustomer"> 卖家客户 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 新增修改 -->
    <AddAndEdit
      :show.sync="addAndEdit.show"
      @getList="getList"
      :formData="addAndEdit.formData"
      :type="addAndEdit.type"
    />
    <!-- 卖家用户 -->
    <SellerUsers :show.sync="sellerUsers.show" @getList="getList" :formData="sellerUsers.formData" />
    <!-- 编辑利润倍率 -->
    <EditProfitRatio :show.sync="editProfitRatio.show" @getList="getList" :formData="editProfitRatio.formData" />
    <!-- 新增编辑 -->
    <AddExpress :FormData="cunrentForm" ref="AddExpress"></AddExpress>
    <!-- 推荐列表 -->
    <RecommendList :show.sync="recommendList.show" @getList="getList" :formData="recommendList.formData" />
    <!-- 角色管理 -->
    <RoleManage :show.sync="roleManage.show" @getList="getList" :formData="roleManage.formData" />
    <!-- 卖家客户 -->
    <SellerCustomer :show.sync="sellerCustomer.show" @getList="getList" :formData="sellerCustomer.formData" />
    <!-- 强制回收列表 -->
    <ForceRecoveryList
      :show.sync="forceRecovery.show"
      @getList="getList"
      :formData="forceRecovery.formData"
    ></ForceRecoveryList>
  </div>
</template>

<script>
import { checkOps } from '@/api/platform/supplierManage'
import { getSellerUserList, selectSellerInfo } from '@/api/platform/sellerManage'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import AddAndEdit from './components/addAndEdit.vue'
import SellerUsers from './components/sellerUsers/index.vue'
import EditProfitRatio from './components/editProfitRatio.vue'
import AddExpress from '@/views/basicSetting/express/component/addExpress.vue'
import RecommendList from './components/recommendList/index.vue'
import ForceRecoveryList from './components/forcedRecovery.vue'
import RoleManage from './components/roleManage/index.vue'
import SellerCustomer from './components/sellerCustomer/index.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'SellerManage',
  components: {
    Treeselect,
    AddAndEdit,
    SellerUsers,
    EditProfitRatio,
    AddExpress,
    RecommendList,
    ForceRecoveryList,
    RoleManage,
    SellerCustomer,
  },
  data() {
    return {
      cunrentForm: {},
      /** 卖家客户 */
      sellerCustomer: {
        show: false,
        formData: {},
      },
      /** 角色管理 */
      roleManage: {
        show: false,
        formData: {},
      },
      /**新增/修改 */
      addAndEdit: {
        show: false,
        type: '',
        formData: {},
      },
      /**卖家用户 */
      sellerUsers: {
        show: false,
        formData: {},
      },
      /**编辑利润倍率 */
      editProfitRatio: {
        show: false,
        formData: {},
      },
      /**推荐列表 */
      recommendList: {
        show: false,
        formData: {},
      },
      /**强制回收列表 */
      forceRecovery: {
        show: false,
        formData: {},
      },
      tableData: [],
      tableCheck: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  watch: {},
  created() {
    this.getList()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true
      getSellerUserList(this.queryParams).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleDetail' /**查询卖家信息 */:
          selectSellerInfo(row.id).then((res) => {
            const { code, data } = res
            if (code === 200) {
              this.addAndEdit.type = 'detail'
              this.addAndEdit.formData = data
              this.addAndEdit.show = true
            }
          })
          break
        case 'sellerUsers' /**查看卖家用户 */:
          this.sellerUsers.formData = row
          this.sellerUsers.show = true
          break
        case 'editProfitRatio' /**编辑利润倍率 */:
          this.editProfitRatio.formData = row
          this.editProfitRatio.show = true
          break
        case 'expressInfo' /**查询卖家快递信息 */:
          this.$refs.AddExpress.showEdit = true
          this.$refs.AddExpress.FormData = row
          this.$refs.AddExpress.canEdit = false
          break
        case 'editExpressInfo' /**编辑卖家快递信息 */:
          this.$refs.AddExpress.showEdit = true
          this.$refs.AddExpress.FormData = row
          this.$refs.AddExpress.canEdit = true
          break
        case 'handleEdit' /**编辑卖家信息 */:
          selectSellerInfo(row.id).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.addAndEdit.type = 'edit'
              this.addAndEdit.formData = data
              this.addAndEdit.show = true
            }
          })

          break
        case 'recommendList' /**推荐列表 */:
          this.recommendList.formData = row
          this.recommendList.show = true
          break
        case 'forceRecoveryList' /**强制回收 */:
          this.forceRecovery.formData = row
          this.forceRecovery.show = true
          break
        case 'roleManage' /**卖家角色管理 */:
          this.roleManage.formData = row
          this.roleManage.show = true
          break
        case 'sellerCustomer' /**卖家客户 */:
          this.sellerCustomer.formData = row
          this.sellerCustomer.show = true
          break
        default:
          break
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      checkOps(2).then((res) => {
        const { code } = res
        if (code === 200) {
          this.addAndEdit.type = 'add'
          this.addAndEdit.show = true
        }
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.addAndEdit.type = 'edit'
      this.addAndEdit.formData = row
      this.addAndEdit.show = true
    },
  },
}
</script>
